<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">

    <title>注册登录</title>
    <link rel="icon" href="{{ url_for('static', filename='favicon.png') }}" type="image/x-icon">
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            min-height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            background: url("/static/bg.png") no-repeat center;
            background-size: cover;
        }

        .container {
            background-color: #222;
            width: 350px;
            height: 550px;
            border-radius: 15px;
            overflow: hidden;
            position: relative;
        }

        .container::after {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;

            background: url("/static/bg.png") no-repeat;
            background-size: cover;

            background-position: left bottom;
            opacity: 0.8;
        }

        /* 注册区域（登录区域很多样式和注册区域的一样，故而一些统一的样式写在了一起） */
        .register-box {
            width: 70%;
            position: absolute;
            z-index: 1;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            transition: 1s ease;
        }

        .register-title,
        .login-title {
            color: #fff;
            font-size: 27px;
            text-align: center;
        }

        .register-title span,
        .login-title span {
            color: rgba(0, 0, 0, 0.4);
            display: none;
        }

        .register-box .input-box,
        .login-box .input-box {
            background-color: #fff;
            border-radius: 15px;
            overflow: hidden;
            margin-top: 50px;
            opacity: 1;
            visibility: visible;
            transition: 0.5s ease;
        }

        .register-box input,
        .login-box input {
            width: 100%;
            height: 30px;
            border: none;
            border-bottom: 1px solid rgba(0, 0, 0, 0.1);
            font-size: 12px;
            padding: 8px 0;
            text-indent: 15px;
            outline: none;
        }

        .register-box input:last-child,
        .login-box input:last-child {
            border-bottom: none;
        }

        .register-box input::placeholder,
        .login-box input::placeholder {
            color: rgba(0, 0, 0, 0.4);
        }

        .register-box button,
        .login-box button {
            width: 100%;
            padding: 15px 45px;
            margin: 15px 0;
            background: rgba(0, 0, 0, 0.4);
            border: none;
            border-radius: 15px;
            color: rgba(255, 255, 255, 0.8);
            font-size: 13px;
            font-weight: bold;
            cursor: pointer;
            opacity: 1;
            visibility: visible;
            transition: 1s ease;
        }

        .register-box button:hover,
        .login-box button:hover {
            background-color: rgba(0, 0, 0, 0.8);
        }

        /* 登录区域 */
        .login-box {
            position: absolute;
            inset: 0;
            top: 20%;
            z-index: 2;
            background-color: #fff;
            transition: 1s ease;
        }

        .login-box::before {
            content: "";
            background-color: #fff;
            width: 200%;
            height: 250px;
            border-radius: 50%;
            position: absolute;
            top: -20px;
            left: 50%;
            transform: translateX(-50%);
        }

        .login-box .center {
            width: 70%;
            position: absolute;
            z-index: 3;
            left: 50%;
            top: 40%;
            transform: translate(-50%, -50%);
        }

        .login-title {
            color: #000;
        }

        .login-box .input-box {
            border: 1px solid rgba(0, 0, 0, 0.1);
        }

        .login-box button {
            background-color: #222;
        }

        /* 注册、登录区域收起 */
        .login-box.slide-up {
            top: 90%;
        }

        .login-box.slide-up .center {
            top: 10%;
            transform: translate(-50%, 0%);
        }

        .login-box.slide-up .login-title,
        .register-box.slide-up .register-title {
            font-size: 16px;
            cursor: pointer;
        }

        .login-box.slide-up .login-title span,
        .register-box.slide-up .register-title span {
            margin-right: 5px;
            display: inline-block;
        }

        .login-box.slide-up .input-box,
        .login-box.slide-up .button,
        .register-box.slide-up .input-box,
        .register-box.slide-up .button {
            opacity: 0;
            visibility: hidden;
        }

        .register-box.slide-up {
            top: 6%;
            transform: translate(-50%, 0%);
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="register-box">
            <h2 class="register-title">
                <span>没有账号，去</span>注册
            </h2>
            <div class="input-box">
                <input type="text" placeholder="用户名" id="register-username">
                <input type="password" placeholder="密码" id="register-password">
                <input type="password" placeholder="确认密码" id="register-confirm-password">
            </div>
            <button onclick="register()">注册</button>
        </div>
        <div class="login-box slide-up">
            <div class="center">
                <h2 class="login-title">
                    <span>已有账号，去</span>登录
                </h2>
                <div class="input-box">
                    <input type="text" placeholder="用户名" id="login-username">
                    <input type="password" placeholder="密码" id="login-password">
                </div>
                <button onclick="login()">登录</button>
            </div>
        </div>
    </div>
    <script>
        function register() {
            // 获取注册表单数据
            let username = document.getElementById("register-username").value;
            let password = document.getElementById("register-password").value;
            let confirmPassword = document.getElementById("register-confirm-password").value;

            // 检查密码和确认密码是否一致
            if (password !== confirmPassword) {
                alert("密码和确认密码不一致");
                return;
            }

            // 发送注册请求
            let xhr = new XMLHttpRequest();
            xhr.open("POST", "/user");
            xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
            xhr.onreadystatechange = function () {
                if (xhr.readyState === XMLHttpRequest.DONE) {
                    if (xhr.status === 200) {
                        let response = JSON.parse(xhr.responseText);
                        alert(response.msg);
                        if (response.status === 1) {
                            // 注册成功，切换到登录界面
                            login_title.click();

                            document.getElementById("login-username").value = username;
                            document.getElementById("login-password").value = password;
                        }
                    } else {
                        alert("注册失败");
                    }
                }
            };
            xhr.send(`type=register&username=${username}&password=${password}`);
        }

        function login() {
            // 获取登录表单数据
            let username = document.getElementById("login-username").value;
            let password = document.getElementById("login-password").value;

            // 发送登录请求
            let xhr = new XMLHttpRequest();
            xhr.open("POST", "/user");
            xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
            xhr.onreadystatechange = function () {
                if (xhr.readyState === XMLHttpRequest.DONE) {
                    if (xhr.status === 200) {
                        let response = JSON.parse(xhr.responseText);
                        alert(response.msg);
                        if (response.status === 1) {
                            window.location.href = "/index_page?username=" + encodeURIComponent(username);
                        }
                        else {
                            document.getElementById("login-password").value = "";
                        }
                    } else {
                        alert("登录失败");
                    }
                }
            };
            xhr.send(`type=login&username=${username}&password=${password}`);
        }

        // 获取要操作的元素
        let login_title = document.querySelector('.login-title');
        let register_title = document.querySelector('.register-title');
        let login_box = document.querySelector('.login-box');
        let register_box = document.querySelector('.register-box');

        // 绑定标题点击事件
        login_title.addEventListener('click', () => {
            // 判断是否收起，收起才可以点击
            if (login_box.classList.contains('slide-up')) {
                register_box.classList.add('slide-up');
                login_box.classList.remove('slide-up');
            }
        })
        register_title.addEventListener('click', () => {
            if (register_box.classList.contains('slide-up')) {
                login_box.classList.add('slide-up');
                register_box.classList.remove('slide-up');
            }
        })
    </script>
</body>

</html>